<template>
  <div>
    <el-card class="box-card">
      <div class="clearfix">
        <span class="title-n" v-if="topTitle.type !== ''"
          >{{ topTitle.type }} /
        </span>
        <span class="title-bold"> {{ topTitle.text }} </span>
        <span> - {{ topTitle.msg }}</span>
      </div>
      <br />
      <div style="margin-left: 10px; margin-top: 10px">
        <span class="el-icon-warning-outline"></span>
        <span class="content"
          >目前计费功能暂不完善，所以计费功能暂未正式启用</span
        >
      </div>
      <div style="margin-left: 10px; margin-top: 10px">
        <span class="el-icon-warning-outline"></span>
        <span class="content"
          >正式收费后，我们讲发送通知至首页公告；在此期间，若有欠费情况可联系我们：发送邮件至<span
            style="color: #75b9ff; font-size: 18px"
            >sensecap@seeed.cc</span
          ></span
        >
      </div>
      <div
        style="
          color: #75b9ff;
          margin-left: 10px;
          margin-top: 10px;
          font-size: 18px;
        "
      >
        点击查看具体收费规则
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "FeeDetail",
  data() {
    return {
      topTitle: {
        type: "计费", //type如果有内容就会显示上一级
        text: "账户信息",
        msg: "展示——————————————————————————————————————",
      },
    };
  },
};
</script>

<style lang='scss' scoped>
.title-bold {
  font-size: 20px;
  font-weight: bold;
}
.title-n {
  color: #b4b2b1;
}
.box-card {
  margin: 10px;
}
.el-icon-warning-outline {
  color: #ffa84a;
  font-weight: 700;
  font-size: 18px;
}
.content {
  font-size: 18px;
  margin-left: 10px;
}
</style>